feat: Adds dataAttributes support to ButtonDropdown items by giridharsaday · Pull Request #4247 · cloudscape-design/components

giridharsaday · 2026-02-12T15:46:51Z

Description

This PR adds support for custom data attributes on ButtonDropdown items, enabling teams to add analytics tracking and custom metadata without DOM manipulation workarounds.

Key Changes:

Add dataAttributes property to Item interface (CheckboxItem inherits it)
Automatically prefix attribute names with 'data-'
Prevent 'testid' override to preserve existing behavior
Add comprehensive unit tests including checkbox items

Use Case:
Teams building analytics-instrumented UIs (like NGS Hub with Tricorder) need to add data-* attributes to track user interactions consistently across multiple instances of the same action.

API Design:

<ButtonDropdown
 items={[
   {
     id: 'edit',
     text: 'Edit',
     dataAttributes: {
       'analytics-action': 'edit-product',
       'item-key': 'product-123'
     }
   }
 ]}
/>
// Renders as: data-analytics-action="edit-product" data-item-key="product-123"

How has this been tested?

✅ Added comprehensive unit tests covering:
- Custom data attributes rendering
- Automatic "data-" prefix addition
- "testid" key exclusion
- Undefined value handling
- Multiple items
- Disabled items
- Checkbox items
✅ Manually tested in dev environment - attributes render correctly on <li> elements
✅ Verified existing tests still pass
✅ Tested keyboard navigation and accessibility - no regressions

Reviewers can test by:

Run unit tests: npm test -- src/button-dropdown/__tests__/data-attributes.test.tsx
Start dev server: npm start
Inspect dropdown items in browser DevTools to verify data-* attributes

Review checklist

Correctness

✅ Changes include appropriate documentation updates (JSDoc comments on interface).
✅ Changes are backward-compatible - new optional property.
✅ Changes do not include unsupported browser features - uses standard data-* attributes.
✅ Changes were manually tested for accessibility - no impact on screen readers or keyboard navigation.

Security

✅ No URL handling in this change.

Testing

✅ Changes are covered with new unit tests (7 test cases).
⚠️ Integration tests not added yet - can be added if requested.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

- Add dataAttributes property to Item interface (CheckboxItem inherits it) - Automatically prefix attribute names with 'data-' - Prevent 'testid' override to preserve existing behavior - Add comprehensive unit tests including checkbox items Resolves: AWSUI-61657

pan-kot · 2026-02-13T09:22:58Z

src/button-dropdown/interfaces.ts

+     *     }
+     *   }
+     * ]}
+     * // Renders as: data-analytics-action="edit-product" data-item-key="product-123"


These docs are not parsed by our docs extractor automatically. Please add it to the items prop description instead.

Let's make them less comprehensive also - I think a single sentence or two should be enough (it is important to mention the prefixing with data-.)

pan-kot · 2026-02-13T09:28:30Z

src/button-dropdown/item-element/index.tsx

+ * - Filters out undefined values
+ */
+const getDataAttributes = (dataAttributes?: Record<string, string>): Record<string, string> => {
+  if (!dataAttributes) return {};


This fails with our linting rules. Please use the prettier/eslint configuration of the package. You can also run npm run lint locally to see if there are some remaining errors.

pan-kot · 2026-02-13T09:29:01Z

src/button-dropdown/item-element/index.tsx

+  return Object.entries(dataAttributes).reduce((acc, [key, value]) => {
+    // Exclude 'testid' to prevent overriding existing data-testid behavior
+    if (key === 'testid' || key === 'data-testid') {
+      console.warn('ButtonDropdown: "testid" key is reserved and cannot be overridden via dataAttributes');


Please use warnOnce utility for that.

pan-kot · 2026-02-13T09:31:23Z

src/button-dropdown/item-element/index.tsx

+ * - Excludes 'testid' to prevent overriding existing behavior
+ * - Filters out undefined values
+ */
+const getDataAttributes = (dataAttributes?: Record<string, string>): Record<string, string> => {


nit: I would move this util to /src/internal/utils - it will make it then easy to reuse for future similar use cases.

The util can probably take a list of properties to exclude.

pan-kot · 2026-02-13T09:33:23Z

src/button-dropdown/__tests__/data-attributes.test.tsx

+      />
+    );
+
+    const item = getByText('Edit').closest('li');


Please use test-utils to find button dropdown items.

pan-kot · 2026-02-13T09:33:58Z

src/button-dropdown/__tests__/data-attributes.test.tsx

+    expect(item).toHaveAttribute('data-item-key', 'product-123');
+  });
+
+  test('automatically prepends data- prefix', () => {


how is that different from the prev test?

At the same time, there seems to be no test to ensure that the "data-" prefix is not added (again) when the passed property already has it.

pan-kot · 2026-02-13T09:35:27Z

src/button-dropdown/__tests__/data-attributes.test.tsx

+    expect(item).not.toHaveAttribute('data-undefined');
+  });
+
+  test('works with multiple items', () => {


I think the "works with multiple items", "works with disabled items", etc - can be combined into a single tests with multiple different items.

giridharsaday requested a review from a team as a code owner February 12, 2026 15:46

giridharsaday requested review from cansuaa and removed request for a team February 12, 2026 15:46

giridharsaday changed the title ~~Add dataAttributes support to ButtonDropdown items~~ feat : add dataAttributes support to ButtonDropdown items Feb 12, 2026

pan-kot self-requested a review February 13, 2026 09:16

pan-kot changed the title ~~feat : add dataAttributes support to ButtonDropdown items~~ feat : Adds dataAttributes support to ButtonDropdown items Feb 13, 2026

pan-kot changed the title ~~feat : Adds dataAttributes support to ButtonDropdown items~~ feat: Adds dataAttributes support to ButtonDropdown items Feb 13, 2026

pan-kot reviewed Feb 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Adds dataAttributes support to ButtonDropdown items#4247

feat: Adds dataAttributes support to ButtonDropdown items#4247
giridharsaday wants to merge 1 commit intocloudscape-design:mainfrom
giridharsaday:TricoderImpl

giridharsaday commented Feb 12, 2026 •

edited by pan-kot

Loading

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

pan-kot Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

giridharsaday commented Feb 12, 2026 • edited by pan-kot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

giridharsaday commented Feb 12, 2026 •

edited by pan-kot

Loading